<template>
  <a-modal
    :title="title"
    width="50%"
    :visible="visible"
    @cancel="close"
  >
    <a-button slot="footer" @click="close">关闭</a-button>
    <a-row :gutter="[0,24]">
      <a-alert message="监听器由后台继承抽象类AbstractBizListener实现" style="margin-bottom: 10px"></a-alert>
      <a-button type="primary" @click="addListener">添加</a-button>
    </a-row>
    <a-row :gutter="[0,24]">
      <a-col span="24">
        <a-card v-for="(element, index) in listenerConfigs" :title="element.name" size="small"
                style="margin-top: 10px"
                :key="index">
          <a slot="extra" @click="removeListener(element)">移除</a>
          <a-form-model :model="element" v-bind="formItemLayout">
            <a-form-model-item label="监听事件">
              <a-radio-group v-model="element.event" @change="change" button-style="solid">
                <a-radio-button value="take" v-if="hostType === 'sequence'">take</a-radio-button>
                <a-radio-button value="start" v-if="hostType === 'node'">start</a-radio-button>
                <a-radio-button value="end" v-if="hostType === 'node'">end</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="事件处理程序">
              <a-select v-model="element.name">
                <a-select-option v-for="(value, key) in listeners" :key="key">{{ value }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="监听器描述">
              <a-input v-model="element.desc" @change="change"></a-input>
            </a-form-model-item>
            <a-form-model-item label="字段值注入">
              <a-row v-for="(field, index) in element.fields" :key="index">
                <a-col span="11">
                  <a-input v-model="field.key" @change="change" placeholder="字段名称"></a-input>
                </a-col>
                <a-col span="11">
                  <a-input v-model="field.value" @change="change" placeholder="字段值"></a-input>
                </a-col>
                <a-col span="2">
                  <a-icon
                    v-if="element.fields.length > 0"
                    class="dynamic-delete-button"
                    type="minus-circle-o"
                    :disabled="element.fields.length === 0"
                    @click="removeField(element.fields, field)"
                  />
                </a-col>
              </a-row>
              <a-button type="dashed" style="width: 100%" @click="addField(element.fields)">
                <a-icon type="plus"/>
                添加字段
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>

export default {
  name: "ListenerConfig",
  components: {},
  props: {
    listenerConfigs: {
      type: Array,
      required: false,
      default: () => []
    },
    hostType: {
      type: String,
      required: true
    }
  },
  model: {
    prop: 'listenerConfigs',
    event: 'change'
  },
  data() {
    return {
      visible: false,
      title: '',
      listeners: [],
    }
  },
  computed: {
    formItemLayout() {
      return {
        labelCol: {span: 4},
        wrapperCol: {span: 14},
      }
    }
  },
  methods: {
    addField(list) {
      list.push({
        key: '',
        value: ''
      })
      this.change()
    },
    removeField(list, field) {
      list.splice(list.indexOf(field), 1)
      this.change()
    },
    removeListener(listener) {
      this.listenerConfigs.splice(this.listenerConfigs.findIndex(i => listener.key === i.key), 1)
      this.change()
    },
    addListener() {
      if (this.listenerConfigs === undefined) {
        this.listenerConfigs = []
      }
      this.listenerConfigs.push({
        name: null,
        desc: '',
        event: null,
        fields: [],
        key: this.listenerConfigs.length + 1
      })
      this.change()
    },
    close() {
      this.visible = false
    },
    edit() {
      this.title = "监听器配置"
      this.loadData()
      this.visible = true
    },
    loadData() {
      //装载程序列表
      this.$get('/process/design/eventListenerList').then(res => {
        this.listeners = res.data
      })
    },
    change() {
      this.$emit("change", this.listenerConfigs)
    }
  }
};
</script>

<style scoped>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  padding-left: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
